import React from 'react'
import ReactDOM from 'react-dom'

let state = []
let index = 0

const myState = (initialValue)=>{
  let currentIndex = index
  state[currentIndex] = state[currentIndex] === undefined?initialValue:state[currentIndex]
  const setState = (newValue)=>{
    state[currentIndex] = newValue
    render()
  }
  index += 1
  return [state[currentIndex],setState]
}

const root = document.querySelector('#root')
const render = ()=>{
  index = 0
  ReactDOM.render(<UseStateTest />, root)
}

const UseStateTest = () => {
  const [n, setN] = myState(0)
  const [m, setM] = myState(1)
  const onClick = ()=>{
    setN(n+1)
  }
  const onClick2 = ()=>{
    setM(m+1)
  }
  return (
    <React.Fragment>
      <div>n:{n}</div>
      <button onClick={onClick}>+1</button>
      <div>m:{m}</div>
      <button onClick={onClick2}>+1</button>
    </React.Fragment>
  )
}
export default UseStateTest